---
title: Mục Menu
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Một mục menu linh hoạt được thiết kế để sử dụng trong một danh sách menu hoặc điều hướng.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính    | Loại          | Mô tả                                                                                                                            |
| ------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| LeftIcon      | IconComponent | Một biểu tượng trái tùy chọn hiển thị trước văn bản trong mục menu                                                               |
| accent        | string        | Chỉ định màu sắc điểm nhấn của mục menu. Options include: `default`, `danger`, and `placeholder` |
| văn bản       | string        | Nội dung văn bản của mục menu                                                                                                    |
| iconButtons   | mảng          | Một mảng các đối tượng đại diện cho các nút biểu tượng bổ sung liên quan đến mục menu                                            |
| isTooltipOpen | boolean       | Kiểm soát sự hiển thị của tooltip liên quan đến mục menu                                                                         |
| mã thử nghiệm | string        | Thuộc tính data-testid cho mục đích kiểm tra                                                                                     |
| onClick       | hàm           | Hàm callback gọi khi mục menu được nhấp vào                                                                                      |
| className     | string        | Tên tùy chọn cho kiểu dáng bổ sung                                                                                               |

</Tab>
</Tabs>

## Biến thể

Các biến thể khác nhau của thành phần mục menu bao gồm những điều sau:

### Lệnh

Một mục menu kiểu lệnh trong menu để chỉ định các phím tắt bàn phím.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính   | Loại          | Mô tả                                                              |
| ------------ | ------------- | ------------------------------------------------------------------ |
| LeftIcon     | IconComponent | Một biểu tượng trái tùy chọn hiển thị trước văn bản trong mục menu |
| văn bản      | string        | Nội dung văn bản của mục menu                                      |
| firstHotKey  | string        | Phím tắt đầu tiên liên quan đến lệnh                               |
| secondHotKey | string        | Phím tắt thứ hai liên quan đến lệnh                                |
| isSelected   | boolean       | Cho biết liệu mục menu có được chọn hay nổi bật hay không          |
| onClick      | function      | Hàm callback gọi khi mục menu được nhấp vào                        |
| className    | string        | Tên tùy chọn cho kiểu dáng bổ sung                                 |

</Tab>
</Tabs>

### Draggable

Một thành phần mục menu có thể kéo được thiết kế để sử dụng trong menu hoặc danh sách nơi các mục có thể được kéo và các hoạt động bổ sung có thể được thực hiện thông qua các nút biểu tượng.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính     | Loại          | Mô tả                                                                                             |
| -------------- | ------------- | ------------------------------------------------------------------------------------------------- |
| LeftIcon       | IconComponent | Một biểu tượng trái tùy chọn hiển thị trước văn bản trong mục menu                                |
| accent         | string        | Màu sắc điểm nhấn của mục menu. Nó có thể là `default`, `placeholder` và `danger` |
| iconButtons    | mảng          | Một mảng các đối tượng đại diện cho các nút biểu tượng bổ sung liên quan đến mục menu             |
| isTooltipOpen  | boolean       | Kiểm soát sự hiển thị của tooltip liên quan đến mục menu                                          |
| onClick        | hàm           | Hàm callback được thực hiện khi liên kết được nhấp vào                                            |
| văn bản        | string        | Nội dung văn bản của mục menu                                                                     |
| isDragDisabled | boolean       | Cho biết liệu việc kéo có bị vô hiệu hóa hay không                                                |
| className      | string        | Tên tùy chọn cho kiểu dáng bổ sung                                                                |

</Tab>
</Tabs>

### Multi Select

Cung cấp một cách để thực hiện chức năng chọn nhiều với một hộp kiểm đi kèm.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính     | Loại          | Mô tả                                                                        |
| -------------- | ------------- | ---------------------------------------------------------------------------- |
| LeftIcon       | IconComponent | Một biểu tượng trái tùy chọn hiển thị trước văn bản trong mục menu           |
| văn bản        | string        | Nội dung văn bản của mục menu                                                |
| đã chọn        | boolean       | Chỉ ra liệu mục menu đã được chọn (đã kiểm tra) hay không |
| onSelectChange | function      | Hàm callback gọi khi trạng thái checkbox thay đổi                            |
| className      | string        | Tên tùy chọn cho kiểu dáng bổ sung                                           |

</Tab>
</Tabs>

### Multi Select Avatar

Một mục menu đa chọn với hình đại diện, hộp kiểm để chọn và nội dung văn bản.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính     | Loại        | Mô tả                                                                        |
| -------------- | ----------- | ---------------------------------------------------------------------------- |
| avatar         | `ReactNode` | Hình đại diện hoặc biểu tượng sẽ hiển thị ở bên trái của mục menu            |
| văn bản        | string      | Nội dung văn bản của mục menu                                                |
| đã chọn        | boolean     | Chỉ ra liệu mục menu đã được chọn (đã kiểm tra) hay không |
| onSelectChange | hàm         | Hàm callback gọi khi trạng thái checkbox thay đổi                            |
| className      | string      | Tên tùy chọn cho kiểu dáng bổ sung                                           |

</Tab>
</Tabs>

### Điều hướng

Một mục menu có biểu tượng trái tùy chọn, nội dung văn bản và biểu tượng mũi tên phải.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính | Loại          | Mô tả                                                              |
| ---------- | ------------- | ------------------------------------------------------------------ |
| LeftIcon   | IconComponent | Một biểu tượng trái tùy chọn hiển thị trước văn bản trong mục menu |
| văn bản    | string        | Nội dung văn bản của mục menu                                      |
| onClick    | hàm           | Hàm callback được thực hiện khi mục menu được nhấp vào             |
| className  | string        | Tên tùy chọn cho kiểu dáng bổ sung                                 |

</Tab>
</Tabs>

### Chọn

Một mục menu có thể chọn được, có lựa chọn trái (biểu tượng và văn bản) và chỉ báo (biểu tượng chọn dấu) cho trạng thái đã chọn.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính  | Loại          | Mô tả                                                                        |
| ----------- | ------------- | ---------------------------------------------------------------------------- |
| LeftIcon    | IconComponent | Một biểu tượng trái tùy chọn hiển thị trước văn bản trong mục menu           |
| văn bản     | string        | Nội dung văn bản của mục menu                                                |
| đã chọn     | boolean       | Chỉ ra liệu mục menu đã được chọn (đã kiểm tra) hay không |
| vô hiệu hóa | boolean       | Chỉ định xem mục menu có bị tắt hay không                                    |
| hovered     | boolean       | Cho biết liệu mục menu có đang được di chuột qua hay không                   |
| onClick     | function      | Hàm callback được thực hiện khi mục menu được nhấp vào                       |
| className   | string        | Tên tùy chọn cho kiểu dáng bổ sung                                           |

</Tab>
</Tabs>

### Chọn Hình đại diện

Mục menu có thể chọn với một hình đại diện, có nội dung bên trái tùy chọn (hình đại diện và văn bản) và chỉ báo (biểu tượng kiểm tra) cho trạng thái đã chọn.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Thuộc Tính    | Loại        | Mô tả                                                                        |
| ------------- | ----------- | ---------------------------------------------------------------------------- |
| avatar        | `ReactNode` | Hình đại diện hoặc biểu tượng sẽ hiển thị ở bên trái của mục menu            |
| văn bản       | string      | Nội dung văn bản của mục menu                                                |
| đã chọn       | boolean     | Chỉ ra liệu mục menu đã được chọn (đã kiểm tra) hay không |
| vô hiệu hóa   | boolean     | Chỉ định xem mục menu có bị tắt hay không                                    |
| hovered       | boolean     | Cho biết liệu mục menu có đang được di chuột qua hay không                   |
| mã thử nghiệm | string      | Thuộc tính data-testid cho mục đích kiểm tra                                 |
| onClick       | hàm         | Hàm callback được thực hiện khi mục menu được nhấp vào                       |
| className     | string      | Tên tùy chọn cho kiểu dáng bổ sung                                           |

</Tab>
</Tabs>

### Chọn Màu

Một mục menu có thể chọn với một mẫu màu cho các kịch bản mà bạn muốn người dùng có thể chọn màu từ menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính  | Loại     | Mô tả                                                                                                                                                                                                     |
| ----------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| màu sắc     | string   | Màu chủ đề sẽ được hiển thị như một mẫu trong mục menu. Các tùy chọn bao gồm: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, và `gray` |
| đã chọn     | boolean  | Chỉ ra liệu mục menu đã được chọn (đã kiểm tra) hay không                                                                                                                              |
| vô hiệu hóa | boolean  | Chỉ định xem mục menu có bị tắt hay không                                                                                                                                                                 |
| hovered     | boolean  | Cho biết liệu mục menu có đang được di chuột qua hay không                                                                                                                                                |
| biến thể    | string   | Biến thể của mẫu màu. Nó có thể là `default` hoặc `pipeline`                                                                                                                              |
| onClick     | function | Hàm callback được thực hiện khi mục menu được nhấp vào                                                                                                                                                    |
| className   | string   | Tên tùy chọn cho kiểu dáng bổ sung                                                                                                                                                                        |

</Tab>
</Tabs>

### Chuyển đổi

Một mục menu với công tắc bật để cho phép người dùng bật hoặc tắt một tính năng cụ thể

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính            | Loại          | Mô tả                                                               |
| --------------------- | ------------- | ------------------------------------------------------------------- |
| LeftIcon              | IconComponent | Một biểu tượng trái tùy chọn hiển thị trước văn bản trong mục menu  |
| văn bản               | string        | Nội dung văn bản của mục menu                                       |
| bật tắt               | boolean       | Chỉ định xem công tắc bật/tắt đang ở trạng thái "bật" hay "tắt"     |
| onToggleChange        | function      | Hàm gọi lại được kích hoạt khi trạng thái công tắc bật/tắt thay đổi |
| kích thước chuyển đổi | string        | Kích thước của công tắc chuyển đổi. Bạn có thể \\ |
| className             | string        | Tên tùy chọn cho kiểu dáng bổ sung                                  |

</Tab>
</Tabs>
